<template>
  <div class="dish-search-page">
    <h1 class="page-title">搜索结果</h1>
    <div v-if="loading" class="loading-spinner">加载中...</div>
    <div v-else>
      <div class="dish-grid">
        <div v-for="dish in dishes" :key="dish.dishId" class="dish-card">
          <el-image :src="dish.imageUrl" fit="cover" class="dish-image"/>
          <div class="dish-details">
            <h3 class="dish-name">{{ dish.name }}</h3>
            <p class="dish-price">价格：{{ dish.price }}元</p>
            <p class="dish-description">{{ dish.description }}</p>
            <p class="dish-category">分类：{{ dish.dishCategoryName }}</p>
            <p class="restaurant-info">
              <strong>餐厅：</strong>{{ dish.restaurantName }}
              <br/>
              <strong>地址：</strong>{{ dish.address }}
              <br/>
              <strong>电话：</strong>{{ dish.phone }}
            </p>
            <div class="dish-actions">
              <el-button type="primary" @click="addToCart(dish)">加入购物车</el-button>
              <el-button type="success" @click="order(dish)">立即购买</el-button>
            </div>
          </div>
        </div>
      </div>
      <div v-if="hasMore" class="load-more" @click="loadMore">
        加载更多
      </div>
      <div v-else class="no-more">
        没有更多数据了
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue';
import { useRoute } from 'vue-router';
import { apiGet } from '@/utils/api';
import type { Dish } from '@/types/entity';
import { addToCart, order } from '@/utils/cartAndOrder';

// 定义响应式的菜品列表
const dishes = ref<Dish[]>([]);

// 分页参数
const page = ref(1);
const pageSize = ref(10); // 每页显示10条数据
const hasMore = ref(true); // 是否还有更多数据
// 加载状态
const loading = ref(true);

// 获取路由对象
const route = useRoute();

// 从路由中获取搜索关键词
const searchKeyword = ref(route.query.keyword as string);

// 从后端获取菜品数据
const fetchDishes = async () => {
  let parameter = {
    page: page.value,
    limit: pageSize.value,
    keyword: searchKeyword.value,
  };
  const { data } = await apiGet('/dish/findAll', parameter);
  if (data.data.length > 0) {
    dishes.value = [...dishes.value, ...data.data];
  } else {
    hasMore.value = false;
  }
  loading.value = false;
};

// 加载更多数据
function loadMore() {
  page.value += 1; // 加载下一页
  fetchDishes();
}

// 监听路由变化，重新获取数据
watch(
    () => route.query.keyword,
    (newKeyword) => {
      if (newKeyword) {
        searchKeyword.value = newKeyword as string;
        page.value = 1; // 重置分页
        hasMore.value = true; // 重置是否有更多数据
        dishes.value = []; // 清空当前数据
        fetchDishes();
      }
    }
);

// 在组件挂载时获取数据
onMounted(() => {
  fetchDishes();
});
</script>

<style scoped>
.dish-search-page {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.page-title {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 20px;
  color: #333;
}

.dish-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.dish-card {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}

.dish-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.dish-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.dish-details {
  padding: 16px;
}

.dish-name {
  margin: 0;
  font-size: 1.2rem;
  color: #333;
}

.dish-price {
  margin: 4px 0;
  font-size: 1rem;
  color: #666;
}

.dish-description {
  margin: 4px 0;
  font-size: 0.9rem;
  color: #888;
}

.dish-category {
  margin: 4px 0;
  font-size: 0.9rem;
  color: #666;
}

.restaurant-info {
  margin: 8px 0;
  font-size: 0.9rem;
  color: #555;
}

.dish-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.load-more,
.no-more {
  text-align: center;
  padding: 10px;
  margin-top: 20px;
  background-color: #f1f1f1;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.load-more:hover {
  background-color: #e1e1e1;
}

.no-more {
  cursor: default;
  color: #888;
}

.loading-spinner {
  text-align: center;
  font-size: 1.2rem;
  color: #666;
  padding: 20px;
}
</style>